<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas圆形进度条</title>
</head>

<body>


    <canvas width="600" height="500" id="cvs"></canvas>


    <script>



        var canvas = document.querySelector('#cvs');
        canvas.style.border = '1px solid blue';
        var cvs = canvas.getContext('2d');

        //圆弧的份数
        var num = 6;
        //一个圆弧对应的弧度
        var angle = Math.PI * 2 / num;

        var canvasW = canvas.width;
        var canvasH = canvas.height;

        //随机颜色
        var getRandomColor = function () {
            var r = parseInt(Math.random() * 256);
            var g = parseInt(Math.random() * 256);
            var b = parseInt(Math.random() * 256);
            return 'rgb(' + r + ',' + g + ',' + g + ')';
        }

        var star = 0;
        var end = angle;
        for (var i = 0; i < num; i++) {
            cvs.beginPath();
            // cvs.moveTo(canvasW / 2, canvasH / 2);
            cvs.arc(canvasW / 2, canvasH / 2, 100, star, end);
            cvs.closePath();
            cvs.fillStyle = getRandomColor();
            cvs.fill();
            star = end;
            end = end + angle;
        }


// #

    // var $ = document.querySelector.bind(document);
    // var canvas = $('#canvas'),
    //     canvasWth = 500;
    //     canvasHgt = 500;
    // canvas.width = canvasWth;
    // canvas.height = canvasHgt;
    // canvas.style.backgroundColor = '#999';
    // var ctx = canvas.getContext('2d');

    // ctx.beginPath();
    // ctx.lineWidth = 5;
    // ctx.strokeStyle = '#666';
    // ctx.arc(200, 200, 100, 0, 2*Math.PI ); // true：逆时针 false：顺时针
    // ctx.stroke();
    // ctx.closePath();

    // // 灰色圆环
    // ctx.beginPath();
    // ctx.lineWidth = 20;
    // ctx.strokeStyle = '#666';
    // ctx.arc(200, 200, 80, 0, 2*Math.PI, true); // true：逆时针 false：顺时针
    // ctx.stroke();
    // ctx.closePath();

    // ctx.beginPath();
    // ctx.lineWidth = 5;
    // ctx.strokeStyle = '#666';
    // ctx.arc(200, 200, 60, 0, 2*Math.PI ); // true：逆时针 false：顺时针
    // ctx.stroke();
    // ctx.closePath();


    // ctx.beginPath();
    // ctx.lineWidth = 5;
    // ctx.strokeStyle = '#666';
    // ctx.arc(200, 200, 55, 0, 2*Math.PI ); // true：逆时针 false：顺时针
    // ctx.stroke();
    // ctx.closePath();



    // // 旋转改变开始位置
    // ctx.translate(200, 200);
    // ctx.rotate(2*Math.PI*(270/360));
    // ctx.translate(-200, -200);

    // // 绿色进度(+号表示字符串转整数)
    // var percent = +canvas.dataset.percent;
    // function progress() {
    //     percent++;
    //     if(percent <= 100) {
    //         // 角度
    //         percent = percent>100?100:percent;
    //         var ang = Math.round(360*percent/100%360);
    //         // 进度条
    //         ctx.beginPath();
    //         ctx.lineWidth = 20;
    //         ctx.strokeStyle = '#03C96A';
    //         ctx.arc(200, 200, 80, 2*Math.PI*(ang/360), 2*Math.PI, true); // true表示顺时针
    //         ctx.stroke();
    //         ctx.closePath();
    //         // 文本
    //         ctx.save(); // 保存上一个状态
    //         ctx.translate(200, 200);
    //         ctx.rotate(2*Math.PI*(-270/360));
    //         ctx.translate(-200, -200);
    //         ctx.clearRect(180, 180, 54, 30); // 清楚上次的文本绘制
    //         ctx.font = '20px seris';
    //         ctx.fillStyle = '#fff';
    //         ctx.fillText(percent+'%', 180, 205);
    //         ctx.restore(); // 恢复上一个状态
    //         // 请求动画针
    //         window.requestAnimationFrame(progress);
    //     }
    // }
    // progress();


    </script>
</body>

</html>